﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>农业大棚信息化数据驾驶舱</title>
    <script type="text/javascript" src="../js/jquery.js"></script>
    <link rel="stylesheet" href="../css/comon0.css">
</head>
<script type="text/javascript">
    function wrapBegin(){
		var html=$(".wrap ul").html()
		$(".wrap ul").append(html)
		var ls=$(".wrap li").length/2+1
		i=0
		ref = setInterval(function(){
			i++
			if(i==ls){
				i=1
				$(".wrap ul").css({marginTop:0})
				$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
			}
	    	$(".wrap ul").animate({marginTop:-'.52'*i+'rem'},1000)
		},2400);
        var html2=$(".adduser ul").html()
		$(".adduser ul").append(html2)
		var ls2=$(".adduser li").length/2+1
		a=0
		ref = setInterval(function(){
			a++
			if(a==ls2){
				a=1
				$(".adduser ul").css({marginTop:0})
				$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)
			}
	    	$(".adduser ul").animate({marginTop:-'.5'*a+'rem'},800)


		},4300);
	}
</script>
<body>
    <div class="loading">
        <div class="loadbox"> <img src="../images/loading.gif"> 页面加载中... </div>
    </div>
    <div class="head">
        <h1><img src="../images/logo.png">农业大棚信息化数据驾驶舱</h1>

    </div>
    <div class="mainbox">
        <ul class="clearfix">
            <li>
                <div class="boxall" style="height: 2.7rem">
                    <div class="alltitle">信息总览</div>
                    <div class="sycm">
                        <ul class="clearfix">
                            <li><h2 id="crop_record">1824</h2><span>作物记录数</span></li>
                            <li><h2 id="fossil_record">1920</h2><span>化肥记录数</span></li>
                            <li><h2 id="product_record">19%</h2><span>产出记录数</span></li>
                        </ul>
                        <div style="border-bottom: 1px solid rgba(255,255,255,.1)"></div>
                        <ul class="clearfix">
                            <li><h2 id="crop_sum">1824</h2><span>作物总量</span></li>
                            <li><h2 id="fossil_sum">1920</h2><span>化肥总量</span></li>
                            <li><h2 id="product_sum">19%</h2><span>产出总量</span></li>
                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.65rem">
                    <div class="alltitle">用户概览</div>
                    <div class="sy" id="echarts1"></div>
                    <div class="sy" id="echarts2"></div>
                    <div class="sy" id="echarts3"></div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 2.95rem">
                    <div class="alltitle">作物区分比例</div>
                    <div id="echarts4" style="height: 2.2rem; width: 100%;"></div>
                    <div class="boxfoot"></div>
                </div>
            </li>
            <li>
                <div class="bar">
                    <div class="barbox">
                        <ul class="clearfix">
                            <li class="pulll_left counter" id="avgTemp">22.9</li>
                            <li class="pulll_left counter" id="avgHumi">49.8</li>
                        </ul>
                    </div>
                    <div class="barbox2">
                        <ul class="clearfix">
                            <li class="pulll_left">平均气温</li>
                            <li class="pulll_left">平均湿度</li>
                        </ul>
                    </div>
                </div>
                <div class="map">
                    <div class="map1"><img src="../images/lbx.png"></div>
                    <div class="map2"><img src="../images/jt.png"></div>
                    <div class="map3"><img src="../images/map.png"></div>
                    <div class="map4" id="map_1"></div>
                </div>
            </li>
            <li>
                <div class="boxall" style="height:5.2rem">
                    <div class="alltitle">用户信息</div>
<!--                    <div class="tabs">-->
<!--                        <ul class="clearfix">-->
<!--                            <li><a class="active" href="#">7天</a></li>-->
<!--                            <li><a href="#">15天</a></li>-->
<!--                            <li><a href="#">30天</a></li>-->
<!--                        </ul>-->
<!--                    </div>-->
<!--                    <div class="clearfix">-->
<!--                        <div class="sy" id="echarts6"></div>-->
<!--                        <div class="sy" id="echarts7"></div>-->
<!--                        <div class="sy" id="echarts8"></div>-->
<!--                    </div>-->
                    <div class="addnew">
                        <div class="tit02"><span>用户列表</span></div>
                        <div class="adduser">
                            <ul class="clearfix" id="userList">

                            </ul>
                        </div>
                    </div>
                    <div class="boxfoot"></div>
                </div>
                <div class="boxall" style="height: 3.4rem">
                    <div class="alltitle">信息速览</div>
                    <div class="wrap">
                        <ul id="infoView">

                        </ul>
                    </div>
                    <div class="boxfoot"></div>
                </div>
            </li>
        </ul>
 
    </div>
    <div class="back"></div>
    <script language="JavaScript" src="../js/js.js"></script>
    <script type="text/javascript" src="../js/echarts.min.js"></script>
    <script type="text/javascript" src="../js/china.js"></script>
    <script type="text/javascript" src="../js/area_echarts.js"></script>
    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {

            // myChart6.resize();
            // myChart7.resize();
            myChart8.resize();
        })
        window.addEventListener("resize", function () {
            myChart1.resize();
            myChart2.resize();
            myChart3.resize();
            myChart6.resize();
            myChart7.resize();
            myChart8.resize();
        });
    </script>
    <script type="text/javascript">
        var v0 = 1000;
        var v1 = 353;
        var v2 = 178;
        var v3 = 68;



        var myChart6 = echarts.init(document.getElementById('echarts6'));
        option6 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#0088cc',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v1,
                    name: '新增会员',
                    label: {
                        normal: {
                            formatter: v1 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                       {
                           value: v0,
                           name: '老会员',
                           label: {
                               normal: {
                                   formatter: function (params) {
                                       return '占比' + Math.round(v1 / v0 * 100) + '%'
                                   },
                                   textStyle: {
                                       color: '#aaa',
                                       fontSize: 12
                                   }
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: 'rgba(255,255,255,.2)'
                               },
                               emphasis: {
                                   color: '#fff'
                               }
                           },
                       }]
            }]

        };

        var myChart7 = echarts.init(document.getElementById('echarts7'));
        option7 = {
            series: [{
                type: 'pie',
                radius: ['70%', '80%'],
                color: '#fccb00',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v2,
                    name: '新增领卡会员',
                    label: {
                        normal: {
                            formatter: v2 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                },
                       {
                           value: v0,
                           name: '总领卡会员',
                           label: {
                               normal: {
                                   formatter: function (params) {
                                       return '占比' + Math.round(v2 / v0 * 100) + '%'
                                   },
                                   textStyle: {
                                       color: '#aaa',
                                       fontSize: 12
                                   }
                               }
                           },
                           itemStyle: {
                               normal: {
                                   color: 'rgba(255,255,255,.2)'
                               },
                               emphasis: {
                                   color: '#fff'
                               }
                           },
                       }]
            }]
        };


        var myChart8 = echarts.init(document.getElementById('echarts8'));
        option8 = {


            series: [{

                type: 'pie',
                radius: ['70%', '80%'],
                color: '#62b62f',
                label: {
                    normal: {
                        position: 'center'
                    }
                },
                data: [{
                    value: v3,
                    name: '女消费',
                    label: {
                        normal: {
                            formatter: v3 + '',
                            textStyle: {
                                fontSize: 20,
                                color: '#fff',
                            }
                        }
                    }
                }, {
                    value: v0,
                    name: '男消费',
                    label: {
                        normal: {
                            formatter: function (params) {
                                return '占比' + Math.round(v2 / v0 * 100) + '%'
                            },
                            textStyle: {
                                color: '#aaa',
                                fontSize: 12
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: 'rgba(255,255,255,.2)'
                        },
                        emphasis: {
                            color: '#fff'
                        }
                    },
                }]
            }]
        };
        setTimeout(function () {
            myChart6.setOption(option6);
            myChart7.setOption(option7);
            myChart8.setOption(option8);
        }, 500);

    </script>


    <script type="text/javascript" src="../js/jquery.waypoints.min.js"></script>
    <script type="text/javascript" src="../js/jquery.countup.min.js"></script>
    <script type="text/javascript">
        $('.counter').countUp();
    </script>

</body>
</html>
